<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <style>
        #div01 {
            border: 1px solid red;
            width: auto;
            height: 600px;
        }
        img {
            width: 500px;
            height: 500px;

        }
    </style>
</head>
<body onload="load()">
<h1>含有文字图片</h1>
<!--<img  th:src="'file://'+${imgpath}">-->
<h1>文字识别内容</h1>

<div id="div01" >

</div>

<!--<span id="sp1" hidden="hidden">[[${imgpath}]]</span>-->

</body>
<script type="text/javascript">
    function load() {
        // console.log($("#sp1").text())
        $.ajax({
            type: "post",
            url: "ocr",
            data: {

            },
            dataType: "json",
            success: function (result) {
                // console.log(result)
                var eval1 = eval(result);
                // console.log(result)
                var arry = result.words_result;
                var str = "";
                for (var i = 0; i < arry.length; i++) {
                    // console.log(arry[i].words)
                    str += "<span style='font-size: 20px'>" + arry[i].words + "</span>"+"<br/>"
                }

                $("#div01").append(str);

            }


        });

    }


</script>
</html>